<template>
  <div class="ProductIp z-h-100">
    <listFilter
      ref="iplistFilter"
      :fields="fields"
      :search-show="false"
      :has-index="false"
      :has-selection="false"
      :left-tool-tool-data="leftToolToolData"
      @rowClick="rowClick"
      @getList="load"
    />

    <div v-show="AddShow" class="addRow">
      <div class="addtd">
        <el-input v-model="addObj.productUrl" />
      </div>

      <div class="addtd">
        <span @click="save">保存</span>
      </div>
    </div>
  </div>
</template>

<script>
import listFilter from '@/components/listFilter/index.vue'

import { urlSave } from '@/api/admin/product'

export default {
  name: 'ProductIp',

  components: {
    listFilter
  },

  data() {
    return {
      AddShow: false,
      addObj: {},

      leftToolToolData: [{ text: '新增', click: this.handleAdd }],

      fields: [
        {
          label: '访问域名',
          prop: 'productUrl'
        },
        {
          label: '操作',
          prop: 'action',
          isTemplate: true
        }
      ]
    }
  },

  methods: {
    async load(index, size, query, callback) {
      const list = await this.$parent.$parent.$parent.urlSearch()

      callback({
        list,
        total: 0
      })
    },

    rowClick(row) {
      const data = row.row
      this.addObj = { ...data }
      this.AddShow = true
    },

    handleAdd() {
      this.addObj = { productUrl: '' }
      this.AddShow = true
    },

    save() {
      urlSave(this.addObj).then(res => {
        if (res.data.code === 0) {
          this.$refs.iplistFilter.refreshFun()
          this.AddShow = false
        }
      })
    }
  }

}
</script>

<style lang='less'>
.ProductIp{
  .addRow{
    margin-top: -15px;
    border: 1px solid #EBEEF5;
    border-top: none;
    height: 40px;
    display: flex;

    .addtd{
      width: calc(100% / 2);
      line-height: 40px;

      &:last-child{
        width: calc(100% / 2 - 1px);
        border-left: 1px solid #EBEEF5;
        padding: 0 10px;
      }

      span{
        cursor: pointer;
      }
    }
  }

  .el-input__inner{
    border-radius: 0;
  }
}
</style>